<template>
  <div class="details">
    <div style="background:#fff;margin-bottom:20px">
      <img
        :src="goodsDetails.imgUrl"
        alt=""
        style="width: 100%; height: 160px"
      />
      <div style="padding: 20px">
        <h1>{{ goodsDetails.name }}</h1>
        <div style="display: flex">
          <p style="color: #a0a0a0">月售{{ goodsDetails.sellCount }}份</p>
          <p style="color: #a0a0a0">好评率{{ goodsDetails.rating }}%</p>
        </div>
        <div
          style="display: flex; justify-content: space-between; margin: 20px 0"
        >
          <p style="color: #f83501; font-size: 30px">
            ￥{{ goodsDetails.price }}
          </p>
          <van-button round type="info" color="#f0c538">
            <van-icon name="shopping-cart" color="#000" />
            加入购物车
          </van-button>
        </div>
      </div>
    </div>
    <div style="padding: 20px;background:#fff">
        <h2 style="margin-bottom:10px">商品介绍</h2>
        <p>{{goodsDetails.goodsDesc}}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import "../../assets/styles/thems.scss";
interface IFoods {
  category?: string;
  ctime?: string;
  goodsDesc?: string;
  id?: number;
  imgUrl?: string;
  name?: string;
  price?: number;
  rating?: number;
  ratings?: Array<IRatings>;
  sellCount?: number;
  value?: number;
}

interface IRatings {
  avatar: string;
  rateTime: number;
  rateType: number;
  text: string;
  username: string;
}
@Component
export default class extends Vue {
  goodsDetails: IFoods = {};
  created(): void {
    console.log(this.$route.query);
    this.goodsDetails = this.$route.query;
  }
}
</script>
<style lang="scss" scoped>
.van-button__text {
  color: #000;
}
.details{
     background:#f4f5f7;
     width: 100%;
     height: 100%;
}
</style>